<!DOCTYPE html>
<html>
<head>
    <title>Nuclear Energy Level Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="650"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        /**
         * Draws a dashed line from (x1, y1) to (x2, y2) with an arrowhead pointing towards (x2, y2).
         * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
         * @param {number} x1 - The x-coordinate of the starting point.
         * @param {number} y1 - The y-coordinate of the starting point.
         * @param {number} x2 - The x-coordinate of the ending point.
         * @param {number} y2 - The y-coordinate of the ending point.
         */
        function drawDashedArrow(ctx, x1, y1, x2, y2) {
            ctx.save();
            ctx.beginPath();
            ctx.setLineDash([6, 4]);
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
            ctx.restore();

            // Arrowhead logic
            const arrowPosRatio = 0.7; // 70% of the way along the line
            const headLength = 8;

            const dx = x2 - x1;
            const dy = y2 - y1;
            const angle = Math.atan2(dy, dx);
            
            const arrowX = x1 + arrowPosRatio * dx;
            const arrowY = y1 + arrowPosRatio * dy;

            ctx.save();
            ctx.beginPath();
            ctx.translate(arrowX, arrowY);
            ctx.rotate(angle);
            ctx.moveTo(-headLength, -headLength / 2);
            ctx.lineTo(0, 0);
            ctx.lineTo(-headLength, headLength / 2);
            ctx.stroke();
            ctx.restore();
        }

        /**
         * Draws a right-facing curly brace.
         * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
         * @param {number} x - The x-coordinate of the brace's spine.
         * @param {number} y1 - The starting y-coordinate.
         * @param {number} y2 - The ending y-coordinate.
         * @param {number} width - The width (or "curliness") of the brace.
         */
        function drawRightBrace(ctx, x, y1, y2, width) {
            const yMid = (y1 + y2) / 2;
            ctx.beginPath();
            ctx.moveTo(x, y1);
            ctx.bezierCurveTo(x + width, y1, x + width, yMid, x, yMid);
            ctx.moveTo(x, yMid);
            ctx.bezierCurveTo(x + width, yMid, x + width, y2, x, y2);
            ctx.stroke();
        }
        
        // --- Main Drawing ---
        
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = '16px Arial';
        ctx.textBaseline = 'middle';

        // --- 20Ne Energy Levels ---
        const boxX = 270;
        const boxWidth = 100;
        
        // Main box for 20Ne levels
        ctx.strokeRect(boxX, 125, boxWidth, 460);
        
        // Ground State (0 MeV, 0+)
        const y0 = 580;
        ctx.beginPath();
        ctx.moveTo(boxX, y0);
        ctx.lineTo(boxX + boxWidth, y0);
        ctx.stroke();
        ctx.textAlign = 'right';
        ctx.font = '16px Arial';
        ctx.fillText('0', boxX - 10, y0);
        ctx.font = '12px Arial';
        ctx.fillText('+', boxX - 2, y0 - 8);
        ctx.font = '16px Arial';
        ctx.textAlign = 'left';
        ctx.fillText('0', boxX + boxWidth + 10, y0);

        // 20Ne Label
        ctx.textAlign = 'center';
        ctx.font = '12px Arial';
        ctx.fillText('20', 315, 600);
        ctx.font = '16px Arial';
        ctx.fillText('Ne', 330, 605);

        // First Excited State (1.63 MeV, 2+)
        const y1_63 = 500;
        ctx.beginPath();
        ctx.moveTo(boxX, y1_63);
        ctx.lineTo(boxX + boxWidth, y1_63);
        ctx.stroke();
        ctx.textAlign = 'right';
        ctx.font = '16px Arial';
        ctx.fillText('2', boxX - 10, y1_63);
        ctx.font = '12px Arial';
        ctx.fillText('+', boxX - 2, y1_63 - 8);
        ctx.font = '16px Arial';
        ctx.textAlign = 'left';
        ctx.fillText('1.63', boxX + boxWidth + 10, y1_63);
        
        // "many levels" section
        const manyLevelsYs = [360, 330, 260, 220];
        manyLevelsYs.forEach(y => {
            ctx.beginPath();
            ctx.moveTo(boxX, y);
            ctx.lineTo(boxX + boxWidth, y);
            ctx.stroke();
        });
        drawRightBrace(ctx, boxX + boxWidth + 10, 200, 480, 15);
        ctx.textAlign = 'left';
        ctx.fillText('many levels', boxX + boxWidth + 35, 340);
        
        // 3- State (10.838 MeV, T=0)
        const y3_minus = 145;
        ctx.beginPath();
        ctx.moveTo(boxX, y3_minus);
        ctx.lineTo(boxX + boxWidth, y3_minus);
        ctx.stroke();
        ctx.textAlign = 'right';
        ctx.font = '16px Arial';
        ctx.fillText('3', boxX - 50, y3_minus);
        ctx.font = '12px Arial';
        ctx.fillText('\u2212', boxX - 42, y3_minus - 8); // Minus sign
        ctx.font = '16px Arial';
        ctx.fillText('T = 0', boxX - 10, y3_minus);
        ctx.textAlign = 'left';
        ctx.fillText('10.838', boxX + boxWidth + 10, y3_minus);
        
        // 3+ State (10.890 MeV, T=1)
        const y3_plus = 130;
        ctx.beginPath();
        ctx.moveTo(boxX, y3_plus);
        ctx.lineTo(boxX + boxWidth, y3_plus);
        ctx.stroke();
        ctx.textAlign = 'right';
        ctx.font = '16px Arial';
        ctx.fillText('3', boxX - 50, y3_plus);
        ctx.font = '12px Arial';
        ctx.fillText('+', boxX - 42, y3_plus - 8);
        ctx.font = '16px Arial';
        ctx.fillText('T = 1', boxX - 10, y3_plus);
        ctx.textAlign = 'left';
        ctx.fillText('10.890', boxX + boxWidth + 10, y3_plus);

        // --- Reactant and Threshold Levels ---
        
        // 16O + alpha (4.730 MeV)
        const yOa = 400;
        const xOa1 = 80, xOa2 = 200;
        ctx.beginPath();
        ctx.moveTo(xOa1, yOa);
        ctx.lineTo(xOa2, yOa);
        ctx.stroke();
        
        ctx.textAlign = 'left';
        ctx.font = '12px Arial';
        ctx.fillText('16', xOa1 + 10, yOa - 8);
        ctx.font = '16px Arial';
        ctx.fillText('O + \u03B1', xOa1 + 24, yOa);
        
        ctx.textAlign = 'left';
        ctx.fillText('4.730', xOa2 + 10, yOa);

        // Dashed arrows from Ne states to O+alpha level
        drawDashedArrow(ctx, boxX, y3_plus, xOa2, yOa); // 3+ to O+a
        drawDashedArrow(ctx, boxX, y3_minus, xOa2, yOa); // 3- to O+a

        // 19F + 3He - d (7.350 MeV)
        const yFHe = 300;
        const xThresh1 = 400, xThresh2 = 480;
        ctx.beginPath();
        ctx.moveTo(xThresh1, yFHe + 10);
        ctx.lineTo(xThresh2, yFHe + 10);
        ctx.stroke();
        
        let currentX = xThresh1 - 20;
        ctx.textAlign = 'left';
        ctx.font = '12px Arial'; ctx.fillText('19', currentX, yFHe - 8);
        ctx.font = '16px Arial'; ctx.fillText('F + ', currentX + 14, yFHe);
        currentX += 45;
        ctx.font = '12px Arial'; ctx.fillText('3', currentX, yFHe - 8);
        ctx.font = '16px Arial'; ctx.fillText('He \u2013 d', currentX + 8, yFHe);
        
        ctx.textAlign = 'left';
        ctx.fillText('7.350', xThresh2 + 10, yFHe + 10);
        
        // 19F + d - n (10.620 MeV)
        const yFdn = 180;
        ctx.beginPath();
        ctx.moveTo(xThresh1, yFdn + 10);
        ctx.lineTo(xThresh2, yFdn + 10);
        ctx.stroke();

        currentX = xThresh1;
        ctx.textAlign = 'left';
        ctx.font = '12px Arial';
        ctx.fillText('19', currentX, yFdn - 8);
        ctx.font = '16px Arial';
        ctx.fillText('F + d \u2013 n', currentX + 14, yFdn);
        
        ctx.textAlign = 'left';
        ctx.fillText('10.620', xThresh2 + 10, yFdn + 10);

        // --- Caption ---
        ctx.textAlign = 'center';
        ctx.font = '16px Arial';
        ctx.fillText('Fig. 2.29', canvas.width / 2, canvas.height - 20);
        
    </script>
</body>
</html>